<template>
  <view class="active_wrap">
    <view class="HMSM">
      <!-- 奖品列表 -->
      <view
        v-for="(block, inblock) in shaftList"
        :key="inblock"
        class="box"
        :style="{
          transform: 'translate3d(' + translateX[inblock] + 'px,0, 0)',
          'transition-duration': duration + 'ms',
        }"
      >
        <view v-for="(item, index) in block" :key="index" class="box_item">
          <image style="width: 100%; z-index: 999" :src="item.image" mode="aspectFit"></image>
          <!-- <view class="border_t" v-if="item.level_id == '1'"
						style="z-index:1;background: linear-gradient(180deg, rgba(0,174,255,0) 0%, #1A9ECE 100%);"></view>
					<view class="border_t" v-if="item.level_id == '2'"
						style="z-index:1;background: linear-gradient(180deg, rgba(255,170,0,0) 0%, #EDB004 100%);"></view>
					<view class="border_t" v-if="item.level_id == '3'"
						style="z-index:1;background: linear-gradient(180deg, rgba(153,0,255,0) 0%, #7500DE 100%);"></view>
					<view class="border_t" v-if="item.level_id == '4'"
						style="z-index:1;background:linear-gradient(180deg, rgba(255,0,0,0) 0%, #7F2633 100%);"></view> -->
        </view>
      </view>
      <!-- <view class="line"></view> -->
    </view>
		<image
		 class="draw-mask"
			src="https://www.dingxians.cn/upload/user_static/index/bg-one.png"
			mode="scaleToFill"
		/>
  </view>
</template>
<script>
export default {
  props: ['devicePixelRatio'],
  data() {
    return {
      //每个盒子宽度
      boxWidth: 0,
      //右边距
      boxRight: 0,
      //线的高度
      lineHeight: 0,
      //类型一发三发或者五发
      type: 1,
      // 位置
      translateX: [0, 0, 0, 0, 0],
      // 总的摇奖时间 单位毫秒
      duration: 8000,
      //奖品列表
      textList: [],
      shaftList: [],
      // 结果列表
      resultsList: [],

      // 是否开奖
      isStart: false,
      // 跳转结果页面定时器
      timer: null,
      // 进入开奖页面时间
      timers: null,

      // 每个奖品生成的长度
      prizeListLen: 50,
    }
  },
  watch: {
    // 两个监听不会同时触发 待检验
    deep: true, // 开启深度监听 专门对付复杂数据类型
    immediate: true, // 首次监听 一打开页面就想监听
    // 监听每个盒子的宽度 并且拿是已开奖状态触发触发
    boxWidth(newValue) {
      if (newValue > 0) {
        if (this.isStart) {
          this.start()
        }
      }
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  },
  methods: {
    getWidth() {
      let query = uni.createSelectorQuery().in(this)
      let dom = query.select('.box_item')
      dom
        .boundingClientRect((data) => {
          if (!data || !data.length) {
            // (690rpx - 40px) / 5
            this.boxWidth = (uni.upx2px(680) - 40) / 5
            console.log("data1: ", this.boxWidth)
          } else {
            this.boxWidth = data.width
            console.log("data2: ", this.boxWidth)
          }
        })
        .exec()
    },
    //随机数据
    init() {
      console.log(this.shaftList)
      let arr = []
      for (let i = 0; i < this.type; i++) {
        let arr1 = []
        for (let j = 0; j < this.prizeListLen; j++) {
          let index = Math.trunc(Math.random() * this.textList.length)
          let text = this.textList[index]
          arr1.push(text)
        }
        arr.push(arr1)
      }
      this.shaftList = arr
      this.$nextTick(() => {
        this.getWidth()
      })
    },
    //开始抽奖
    start() {
      let that = this
      if (that.isShowResult) {
        return
      }
      this.findPro(this.resultsList)
      // let url = 'http://www.qixdian.cn/upload/20230831/draw.mp3'
      let url = 'http://www.dingxians.cn/app/12750.mp3'
      this.$emit('playVoice', url)
      this.timer = setTimeout(() => {
        // this.$parent.$parent.start()
        this.$emit('drawEnd')
      }, 8500)
    },
    closePage() {
      this.isShowResult = true
      if (this.timer != null) {
        clearTimeout(this.timer)
      }
    },
    //定位结果数据
    findPro(list) {
      let num = this.prizeListLen - 3
      let translateNum = (this.boxWidth + 10) * (num - 2)
      let translateArr = []
      for (let i = 0; i < this.type; i++) {
        let data = {
          image: list[i].blind_box_prize_image,
          level_id: list[i].level_id,
        }
        this.shaftList[i].splice(num, 1, data)
        translateArr[i] = translateNum * -1
      }
      this.translateX = translateArr
    },
  },
}
</script>
<style lang="scss" scoped>
.active_wrap {
	position: relative;
  width: 750rpx;
  height: 580rpx;
  // background-image: url('https://mh.qingfentool.vip/upload/image/20230511/9bb62c23e7f4434ac1d51481a5a139a3.png');
  // background-color:red;
  // background-repeat: no-repeat;
  // background-size: 100% 100%;
  // position: relative;
  // overflow: hidden;
  /* 	margin-bottom: 200rpx; */
	.draw-mask {
		position: absolute;
		left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
	}

  &::after {
    content: '';
    z-index: 2;
    position: absolute;
    left: 30rpx;
    top: 100rpx;
    width: 688rpx;
    height: 400rpx;
    background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-draw-mask.png');
    background-size: 100% 100%;
  }
  .HMSM {
    z-index: 3; 
    position: absolute;
    top: calc(50% - 80rpx);
    left: 35rpx;
    width: 680rpx;
		background-size: 100% 100%;
		background-image: url('https://www.dingxians.cn/upload/user_static/index/bg-draw-item.png');
    overflow: hidden;
    box-sizing: border-box;
    /* padding: 0 20rpx; */

    .box {
      display: flex;
      align-items: center;
      transition: all cubic-bezier(0.3, 0.1, 0, 1) 0s;
      margin-bottom: 18rpx;
      position: relative;
      box-sizing: border-box;
      /* padding: 0 40rpx; */

      &:nth-last-child(1) {
        margin-bottom: 0;
      }

      .box_item {
        display: flex;
        // align-items: center;
        justify-content: center;
        position: relative;
        width: calc((680rpx - 40px) / 5);
        height: 180rpx;
        // background: #8EC6D1;
        // border: 3rpx solid #1D82C8;
        border-radius: 10rpx;
        margin-right: 10px;
        box-sizing: border-box;
        flex-shrink: 0;
        overflow: hidden;

        image {
          width: 84%;
          height: 140rpx;
          margin: calc((116rpx - 12rpx - 90rpx - 3rpx) / 2) 0;
          border-radius: 4rpx;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          z-index: 999;
        }

        .border_t {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          border-radius: 5rpx;
          height: 62rpx;
          // transform: rotate(351deg) translateY(0rpx) rotateX(60deg) skewX(345deg);
          // z-index: 1;
        }

        .box1 {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          text-align: center;
          line-height: 120rpx;
          color: #fff;
        }
      }
    }

    .line {
      background-color: #ffffff;
      width: 6rpx;
      height: 240rpx;
      position: absolute;
      top: 92rpx;
      left: 366rpx;
    }
  }
}
</style>
